<template>
  <div id="app">
    <component :view="com" v-bind:is="com.name" @redirect="onRedirect" ref="view"/>
    <trace :traces="trace"/>
  </div>
</template>

<script>
import Father from './Container';
import Admin from './apps/Admin';
import Trace from './apps/Trace';
import Login from './apps/Login';
import Simple from './views/Simple';
import Install from './apps/Install';

export default {
  name: 'App',
  extends: Father,
  data() {
    return {
      trace: {
        rows: [],
      },
    };
  },
  created() {
    // 挂载跳转处理器
    // this.$root.$EventBus.on('redirect', (action) => {
    //   if (!action) return;
    //   const url = action.url || action;
    //   window.location.href = url;
    // });
    this.$root.$EventBus.on('redirect', this.onRedirect);

    // 挂载调试信息处理器
    this.$addReceiver((data) => {
      // 跳转处理
      if (data.redirect) {
        this.redirect(data.redirect);
        return false;
      }
      // 捕获调试信息
      if (data.trace) this.trace = data.trace;

      // 捕获提示信息
      if (data.message) {
        this.$message({
          showClose: true,
          message: data.message.text,
          type: data.message.type,
        });
      }
      return true;
    });
    // 启动时显示的默认页面
    this.$nextTick(() => {
      this.onRedirect({ url: window.index });
    });
  },
  components: {
    Admin,
    Trace,
    Login,
    Simple,
    Install,
  },
  methods: {
    beforeRedirect(action) {
      return action;
    },
  },
};
</script>

<style>
html,body {
  height: 100%;
  overflow: hidden;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  display: flex;
}

/** 居中布局元素 */
.center {
  text-align: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.tree-view .el-tree-node__content {
  height: 50px;
  border-bottom: 1px solid #ebeef5;
}
</style>
